<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $(".pop_con").fadeIn();
                return false;
            });

            $(document).click(function () {
                $(".pop_con").fadeOut();

            });

            $('.pop').click(function () {
                return false;
            });
            $('.close').click(function () {
                $(".pop_con").fadeOut();
            })

        });
    </script>
    <style type="text/css">
        .pop_con {
            display: none;
        }

        .pop {
            position: fixed;
            width: 500px;
            height: 300px;
            background-color: #ffffff;
            border: 3px solid #000000;

            left: 50%;
            top: 50%;

            margin-left: -250px;
            margin-top: -150px;
            z-index: 9999;

        }


        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.3;
            filter: alpha(opacity=30);
            left: 0;
            top: 0;
            z-index: 9998;
        }

        .close {
            float: right;
            font-size: 30px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <input type="button" value="弹出" id="btn">


    <div class="pop_con">
        <div class="pop">
            弹框里面文字
            投资金额:
            <input type="text" name="">
            <a href="#" class="close" id="close">×</a>
        </div>
        <div class="mask"></div>


    </div>
</body>

</html>